<div class="mailer-container">
  <h2 class="mailer-heading">Welcome to CircuitVerse, <%= @user.name %></h2>
  
  <div class="mailer-hero-image">
    <%= inline_svg_tag "homepage/new_homepage_sketch.png", alt: "Welcome", class: "mailer-group-image" %>
  </div>

  <p class="mailer-welcome-text mailer-text">
    Thanks for signing up!<br>
    With CircuitVerse you can explore simple gates to complex sequential circuits, plot timing diagrams, automatic circuit generation, explore standard ICs, design digital logic circuits, and much more – for free!
  </p>

  <div class="mailer-button-container">
    <a href="https://circuitverse.org/simulator" class="mailer-button">
      Launch Simulator
      <span class="mailer-button-icon">→</span>
    </a>
  </div>

  <div class="mailer-showcase-container">
    <div class="mailer-showcase-card">
      <div class="mailer-showcase-icon">
        <%= inline_svg_tag "pngs/features.png", alt: "Features", class: "mailer-showcase-card-image" %>
      </div>
      <h3 class="mailer-showcase-heading">Features</h3>
      <p class="mailer-text mailer-showcase-text">
        Design circuits quickly and easily with a modern and intuitive user interface with drag-and-drop, copy/paste, zoom and more.
      </p>
      <a href="https://circuitverse.org/#features" class="mailer-showcase-link">
        Know More
        <span class="mailer-link-arrow">→</span>
      </a>
    </div>

    <div class="mailer-showcase-card">
      <div class="mailer-showcase-icon">
        <%= inline_svg_tag "pngs/design.png", alt: "Design", class: "mailer-showcase-card-image" %>
      </div>
      <h3 class="mailer-showcase-heading">Design</h3>
      <p class="mailer-text mailer-showcase-text">
        Don't know how to design? CircuitVerse is easy to use for beginners. This documentation will help you get started quickly.
      </p>
      <a href="https://docs.circuitverse.org/" class="mailer-showcase-link">
        Know More
        <span class="mailer-link-arrow">→</span>
      </a>
    </div>

    <div class="mailer-showcase-card">
      <div class="mailer-showcase-icon">
        <%= inline_svg_tag "pngs/learn.png", alt: "Learn", class: "mailer-showcase-card-image" %>
      </div>
      <h3 class="mailer-showcase-heading">Learn</h3>
      <p class="mailer-text mailer-showcase-text">
        Want to know more about digital circuits? This Interactive book gives you complete understanding on how digital circuits work.
      </p>
      <a href="https://learn.circuitverse.org/" class="mailer-showcase-link">
        Know More
        <span class="mailer-link-arrow">→</span>
      </a>
    </div>
  </div>

  <div class="mailer-footer">
    <p class="mailer-text">Keep building!</p>
  </div>
</div>
